<template>
  <div class="color-manage">
    <div class="color-manage-form-field">
      <el-row :gutter="10" class="add-color">
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <label for="needUpdate">添加颜色:</label>
            <el-input
              v-model="colorVal"
              class="w-50 m-2"
              size="large"
              placeholder="请输入需要添加的颜色!"
              @keyup.enter.native="addHandle"
            />
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <label for="needUpdate">备注:</label>
            <el-input
              v-model="postscript"
              class="w-50 m-2"
              size="large"
              placeholder="备注栏可以不填!"
              @keyup.enter.native="addHandle"
            />
          </div>
        </el-col>
        <el-col :span="5" class="add-btn">
          <el-button type="primary" size="small" @click="addHandle">添加</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="search-color">
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <label for="color">颜色筛选:</label>
            <el-input
              v-model="searchColor"
              class="w-50 m-2"
              size="large"
              placeholder="请输入需要查找的颜色!"
              @keyup.enter.native="search"
            />
          </div>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="small" @click="search">查询</el-button>
          <el-button size="small" @click="counter++">重置</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <hr>
      </el-row>
    </div>
    <div class="color-manage-table">
      <el-table
        :data="colorData"
        empty-text="暂无数据!"
        style="width: 100%"
        table-layout="fixed"
        stripe
      >
        <el-table-column align="center" prop="color" label="颜色" min-width="80">
          <template #default="scope">
            <el-tag effect="light">{{ scope.row.color }}</el-tag>
            <!-- {{ scope.row.color }} -->
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updatedAt" label="最新修改日期" min-width="100">
          <template #default="scope">
            <div>
              {{ moment(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updatedUser" label="最新修改人" min-width="80" />
        <el-table-column align="center" prop="createdAt" label="添加日期" min-width="100">
          <template #default="scope">
            <div>
              {{ moment(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createdUser" label="添加人" min-width="80" />
        <el-table-column align="center" prop="postscript" label="备注信息" />
        <el-table-column align="center" label="操作">
          <template #default="scope" min-width="180">
            <el-button type="primary" plain size="small" @click="updateHandle(scope.row)">修改</el-button>
            <el-button v-if="hasAdminPermission" type="danger" plain size="small" @click="deleteHandle(scope.row)">删除</el-button>
            <!-- <el-button type="danger" plain size="small" @click="deleteHandle(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20" justify="center" align="middle" type="flex" class="page-row">
        <el-col :span="10">
          <el-pagination
            layout="total, sizes, prev, pager, next"
            :current-page="page"
            :page-size="size"
            :total="total"
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-col>
      </el-row>
    </div>
    <div class="color-manage-dialog">
      <el-dialog title="颜色修改" :visible.sync="editVisible" width="400px" top="30vh">
        <el-form :model="formData">
          <el-form-item label="颜色名称 :" label-width="80px">
            <el-input v-model="formData.color" autocomplete="off" @keyup.enter.native="submitEdit" />
          </el-form-item>
          <el-form-item label="备注信息 :" label-width="80px">
            <el-input v-model="formData.postscript" autocomplete="off" @keyup.enter.native="submitEdit" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitEdit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { addColor, getColorList, removeColor, updateColor } from '@/api/color'
import { adminPermissionTime } from '@/config/config'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      // 表单域数据
      searchColor: '',
      colorVal: '',
      postscript: '',
      searchData: {},
      // 表格数据
      colorData: [],
      color: '',
      screenData: {},
      total: 0,
      page: 1,
      size: 10,
      // 修改弹框
      editVisible: false,
      formData: {
        id: 0,
        color: '',
        postscript: ''
      },
      counter: 0,
      timeoutId: null,
      permissionTimeoutId: null,
      hasAdminPermission: false
    }
  },
  watch: {
    counter(newValue, oldValue) {
      clearTimeout(this.timeoutId)

      console.log(this.counter)
      this.timeoutId = setTimeout(() => {
        this.counter = 0
      }, 10000)

      if (this.counter >= 10) {
        this.setAdminPermission()
        this.hasAdminPermission = true
        clearTimeout(this.permissionTimeoutId)
        this.permissionTimeoutId = setTimeout(() => {
          this.hasAdminPermission = false
        }, adminPermissionTime)
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    // 表单域方法
    async addHandle() {
      if (!this.colorVal) {
        return Message({ message: '颜色栏不能为空', type: 'error' })
      }
      const colorData = {
        postscript: this.postscript || '-',
        color: this.colorVal
      }
      const { code, message } = await addColor(colorData)
      let type = 'error'
      if (code === 200) {
        // this.colorData.unshift(data)
        this.search()
        type = 'success'
      }

      Message({ message, type })
      return
    },
    async search() {
      const searchData = {
        color: this.searchColor,
        // color: this.searchColor.toString(),
        page: this.page,
        size: this.size
      }
      try {
        const { code, data } = await getColorList(searchData)
        if (code === 200) {
          this.total = data.count
          this.colorData = data.list
        }
      } catch (error) {
        Message({ type: 'error', message: '获取数据失败' })
      }
    },
    // 表格区域方法
    getColorData(colorData) {
      this.colorData = colorData
    },
    handleCurrentChange(val) {
      this.page = val
      this.search()
    },
    handleSizeChange(val) {
      this.size = val
      this.search()
    },
    async updateHandle(row) {
      console.log(row)
      this.formData.id = row.id
      this.formData.color = row.color
      this.formData.postscript = row.postscript
      this.editVisible = true
    },
    async deleteHandle(row) {
      this.$confirm(
        '删除颜色会自动删除所有绑定该颜色的产品,<br/>是否确定删除??',
        '警告!',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true, // 使用HTML片段
          type: 'warning'
        }
      ).then(async() => {
        try {
          const { code, message } = await removeColor({ id: row.id })
          if (code === 200) {
            Message({ type: 'success', message })
            this.search()
          }
        } catch (error) {
          Message({ type: 'error', message: '删除失败!' })
        }
      }).catch(() => {
        Message({ type: 'warning', message: '取消删除' })
      })
    },
    cancel() {
      this.formData.id = 0
      this.formData.color = ''
      this.formData.postscript = ''
      this.editVisible = false
    },
    async submitEdit() {
      if (this.formData.id === 0) {
        return Message({ type: 'error', message: 'id 错误!请联系系统管理员!' })
      }

      if (this.formData.color === '') {
        return Message({ type: 'error', message: '颜色数据不能为空!' })
      }

      try {
        const { code, message } = await updateColor(this.formData)
        if (code === 200) {
          Message({ type: 'success', message })
          this.search()
        }
      } catch (error) {
        Message({ type: 'error', message: '修改失败!' })
      } finally {
        this.editVisible = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>

.el-row {
  margin: 18px 0;
}
label {
  margin-right: 8px;
  font-size: 14px;
}
[class*="el-col-"] {
  text-align: left;
}
.b-select {
  width: 100%;
}
.el-select {
  width: 80%;
}
.status .el-select {
  width: 60%;
}
.create-time .el-date-editor,
.update-time .el-date-editor {
  width: 81%;
}
.add-color,
.search-color{
  display: flex;
  align-items: center;
  .el-input {
    width: 70%;
    height: 36px;
  }

  ::v-deep.el-input__inner{
    height: 36px;
  }

  .add-btn{
    height: 40px;
    display: flex;
    align-items: center;
  }
}
.search-color{
  .el-input{
    width: 81%;
  }
}

.color-manage {
  padding: 6px 40px;
  box-sizing: border-box;
  width: 100%;
}

.el-pagination{
  display: flex;
  justify-content: center;
}

::v-deep .el-dialog__body{
  padding: 20px 40px 10px 30px;
}

.dialog-footer{
  display: flex;
  justify-content: center;
}
</style>
